<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/news.css" />
</head>

<body>
    <div id="news-list">

        <!-- <div class="news-item">
            <img class="thumb" src="" alt="" />
            <div class="right-box">
                <h1 class="title">5G商用在即，三大运营商营收持续下降</h1>
                <div class="tags">
                    <span>三大运营商</span>
                    <span>中国移动</span>
                    <span>5G商用</span>
                </div>
                <div class="footer">
                    <div>
                        <span>胡润百富</span>&nbsp;&nbsp;
                        <span>2019-10-28 10:14:38</span>
                    </div>
                    <span>评论数：66</span>
                </div>
            </div>
        </div> -->


    </div>
    <script src="./lib/jquery.js"></script>
    <script src="./lib/template-web.js"></script>
    <script src="./lib/moment.min.js"></script>
    <!-- 定义模版 -->
    <script type="text/html" id="new_template">
        {{ each data }}
        <div class="news-item">
            <img class="thumb" src="{{ $value.img | preFix }}" alt="" />
            <div class="right-box">
                <h1 class="title">{{ $value.title }}</h1>
                <div class="tags">
                    {{ each $value.tags.split(",") }}
                    <span>{{ $value }}</span>
                    {{ /each }}
                </div>
                <div class="footer">
                    <div>
                        <span>{{ $value.source }}</span>&nbsp;&nbsp;
                        <span>{{ $value.time | dateFormat }}</span>
                    </div>
                    <span>评论数：{{ $value.cmtcount }}</span>
                </div>
            </div>
        </div>
        {{ /each }}
    </script>

    <script>
        const baseURL = `http://www.liulongbin.top:3006`

        template.defaults.imports.preFix = function (value) {
            return baseURL + value
        }

        template.defaults.imports.dateFormat = function (value) {
            return moment(new Date(value)).format("YYYY-MM-DD hh:mm:ss")
        }

        $.get(`${baseURL}/api/news`, (result) => {
            console.log(result);

            document.querySelector("#news-list").innerHTML = template("new_template", result)
        })
    </script>

</body>

</html>